<div class="container page-container" id="event-guest">
    <div class="page-header">
        <h2><span class="glyphicon glyphicon-group"></span> Guest</h2>
    </div>
    <ul class="nav nav-tabs guest-nav">
        <li class="active choose-design-nav"><a href="#files" data-toggle="tab">Choose Design</a></li>
        <li class="update-details-nav"><a href="#venue" data-toggle="tab">Update Detail</a></li>
        <li class="invite-guest-nav"><a href="#event-type" data-toggle="tab">Invite Guest</a></li>
        <li class="finish-send-nav"><a href="#general-checklist" data-toggle="tab">Finish Send</a></li>
        <li class="general-checklist-nav"><a href="#general-checklist" data-toggle="tab">Seatplan</a></li>
    </ul>
    <div id="choose-design-con">
        <div id="guest-title-con" class="col-md-offset-1">
            <h2 id="guest-title" class="col-md-3">Choose Invitation Design</h2>
            <a class="skip_back btn btn-info"  href="<?php echo site_url() ?>guest_management/enter_details" style="text-decoration: none">Skip</a>
        </div>
        <hr/>
        <div id="content_con">
            <div id="list_event">
                <div id="content" style="width: 100%; height: 100%">
                    <div id="innercont" style="width: 100%; height: 100%">

                        <div id="category_list" style="margin-bottom:25; width: 100%; height: 100%">
                            <div  class="customize_eventtype" style="width: 100%; height: 100%;">

                                <div class="list">
                                    <?php
//                                    $count = 1;
//                                    foreach ($event_type as $item) {
//                                        echo '<ul>';
//                                        echo '<li class="customize_no_border">' . "<a href='#'>" . $item ['type_name'] . '</a>';
//                                        echo '</li>';
//                                        echo '</ul>';
//                                        if (($count % 5) === 0 && $count !== 0) {
//                                            echo '</div><div class="list">';
//                                        }
//                                        $count++;
//                                    }
                                    ?>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="invi_con">
                <div id="choose_invi">
                    <div class="panel-group" id="accordion" style="height: 34%;" >
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="text-decoration-line: cancel-overline">
                                        Choose Designs
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body" >
                                    <div style="overflow-x: hidden; overflow-y: auto; height: 316px;text-align: left !important;">
                                        <?php foreach ($pics->result() as $row) { ?>
                                            <picture href="#"><img class="design-pic" src="<?php echo site_url() . $row->design_path; ?>"/></picture>
                                        <?php } ?>
                                        <hr/>
                                        <form id="upload" action="<?php echo site_url(); ?>upload_cont/doUpload" method="post" enctype="multipart/form-data">
                                            <input type="hidden" name="id"/>

                                            <input type="file" name="userfile" size="20"/>
                                            <input type="submit" name="submit" class="btn btn-info" value="Upload"><br/>

                                            <script>
//                                                $('input[type="file"]').inputfile({
//                                                    uploadText: '<span></span> Select a file',
//                                                    removeText: '<span class="glyphicon glyphicon-trash"></span>',
//                                                    restoreText: '<span class="glyphicon glyphicon-remove"></span>',
//                                                    uploadButtonClass: 'btn btn-primary',
//                                                    removeButtonClass: 'btn btn-default'
//
//                                                });
                                            </script>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                        Upload Customize Design
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body" >


                                    <form id="upload" id="upload_form" action="<?php echo site_url() ?>upload_cont/doUpload" method="post" enctype="multipart/form-data">

                                        <input type="hidden" name="id">
                                        <input type="file" name="userfile" value="imgfile"  ><br/>


                                        <span class="upload_hint">The image must be 4.5 X 6 inches.</span>
                                        <br>
                                        <span class="upload_hint">Max Size: 5MB (jpg, gif, png, jpeg)</span>
                                        <br/><br/>

                                        <input type="submit" value="Upload" name="submit" class="btn btn-block btn-info"/>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="preview" ></div>
                <div id="clear_div"></div>
            </div>

            <div id="bottom" >
                <div id="save"  >
                    <input type="button" class=" btn btn-success" onclick="location.href = '<?php echo site_url() ?>guest_management/enter_details'" value="Save Design"/>
                </div>
            </div>
        </div>
    </div>
    <!--update details container-->
    <div id="enter-details-con" class="hide">
        <div id="guest-title-con" class="col-md-offset-1">
            <h2 id="guest-title" class="col-md-1">Update Detail</h2>
            <a class="skip_back btn btn-info"  href="<?php echo site_url() ?>guest_management/enter_details" style="text-decoration: none">Back</a>
        </div>
<hr/>
        <form  method="post" action="<?php site_url() ?>invite_guests">
            <div id="guest-event-title-con" class="col-md-offset-1">
                <p>
                    <label for="name">Name of your Event</label>
                </p>
                <input type="text" name="client_id" value="<?php //echo $client_id ?>" style="display: none"/>
                <input type="text" name="event_id" value="<?php //echo $event_id ?>" style="display: none"/>

                <input id="guest-event-title" class="form-control form-group" type="text" name="event_name" maxlength="70" rows="1" class="title_text" value="<?php //echo $event_name ?>"/>
            </div>
            <div id="guest-details-left" class="col-md-offset-1">
                <p>
                    <label for="hosted_by">Hosted By: </label>
                </p>
                <input id="input_text" class="form-control" type="text"  name="client_fname" value="<?php //echo $client_fname ?>" id="hosted_by" maxlength="100" rows="1" class="hosted_by_text" />
                <br/>
                <p>
                    <label for="description" >Event Description</label>
                </p>

                <textarea type="text" id="desc" name="event_description" class="form-control"  ><?php //print $event_description; ?> </textarea>
                <hr>
                <div class="form-group">
                  
                    <label for="date">Event Date:&nbsp;</label> <br/>
                    <input type="date" name="start_date" value="<?php //echo $start_date ?>" maxlength="45" size="45"  style="width:100%;height: 32px;border-radius: 5px; font-weight: bold; padding-left: 10px; color: #444444" onkeydown="return tabOnEnter (this, event);">

                    <br/>
                    <br/>
                    <label for="start_time">Event start Time:&nbsp;</label>
                    <input type="text" class="form-control input-small" name="event_time" id="t1" value="<?php// echo $event_time ?>" data-format="hh:mm A" style="width:100%; font-weight: bold ">
                </div>
            </div>
            <div id="guest-details-right" class="col-xs-offset-1">
                <div class="form-group">
                    <label for="loc_name">Event Venue Name</label>
                    <input id="input_text" class="form-control field4" type="text" name="venue_name" value="<?php// echo $venue_name ?>" id="loc_name" maxlength="100" rows="1" class="optional_text" />  
                    <br/>
                    <label for="loc_add">Event Venue Address</label>
                    <input id="input_text" class="form-control field5" type="text" name="venue_address" value="<?php// echo $venue_address ?>" id="loc_add" maxlength="200" rows="2" class="optional_text" />   
                </div>

            </div>
            <div id="bottom" >

                <div id="save">
                    <button type="submit" class=" btn btn-success">Update Invitation Details</button>

                </div>
            </div>  
        </form>
    </div>
    <div id="invite-guests-con" class="hide">
        invite
    </div>
    <div id="finish-send-con" class="hide">
        <div id="guest-title-con" class="col-md-offset-1">
            <h2 id="guest-title" class="col-md-1">Finish and Send</h2>
            <a class="skip_back btn btn-info"  href="<?php echo site_url() ?>guest_management/enter_details" style="text-decoration: none">Back</a>
        </div>
        <hr/>
        <div id="invitation_design">
                   <style>
    #invitation_con{
        border: 1px solid transparent;
        width: 90%;
        height: 100%;
        margin: auto;
        margin-bottom: 20px;
    }
    #rsvp_invi_con{
        border: 1px solid transparent;
        width: 25%;
        height: 100%;
        margin: auto;
        float: right;
        
    }
     
    #left_invi_con{
        border: 1px solid #999999;
        width: 73%;
        height: 100%;
        margin: auto;
        float: left;
        border-radius: 10px;
        padding: 10px;

    }
    #title_invi{
        border: 1px solid #000;
        width: 100%;
        height: 10%;
        margin: auto;
        text-align: center;
        font-size: 2em;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;    
    }
    #hostby{
        border: 1px solid #000;
        width: 100%;
        height: 10%;
        clear: both;
        margin: auto;
        text-align: center;
    }
    
    #pic{

        border: 1px solid transparent;
        position: relative;
        width: 450px;
        height: 400px;
        clear: both;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 20px;
        background-repeat: no-repeat;
        background-size: 80% 90%;
        background-position: center;
    }
    #inivitation_img{
        position: absolute;
        width: auto;
        height: auto;
        margin: auto;
        max-width: 400px;
        max-height: 400px;
        top: 0; right: 0; bottom: 0; left: 0;
    }
    
    #time_date{
        margin-top: 20px;
        width: 48%;
        float: left;
    }
    #location_invi{
        margin-top: 20px;
        width: 48%;
        float: right;
        
    }
    #desc_invi{
        clear: both;
    }
    #rsvp_no{
        text-align: center;
        font-size: 1.5em;
        width: 45%;
        float: right;
    }
    #rsvp_yes{
        
        text-align: center;
        font-size: 1.5em;
        width: 45%;
        float: left;
    }
    #bottom_invi_con{
        clear: both;
    }
</style>
    
<div id="invitation_con">
    
        <div id="rsvp_invi_con">
            
            <div class="panel panel-default">
                <div class="panel-heading">RSVP</div>
                <div class="panel-body">
                    
                    <form>
                        <div data-toggle="buttons" >
                        <label class="btn btn-success glyphicon glyphicon-thumbs-up" style="height: 30px; width: 100%; ">
                          <input type="radio" name="options" id="option1" style=""> YES
                        </label>
                        
                        <label class="btn btn-danger glyphicon glyphicon-thumbs-down" style="height: 30px;width: 100%; margin-top: 10px; ">
                          <input type="radio" name="options" id="option2"> NO
                        </label>
                        </div>
                        
                    </form>
                </div>
             </div>
            
        </div>
        
     <div class="clear"></div>
        
        <div id="left_invi_con">
            
            <div id="title_invi">
                title
            </div>
            <div id="hostby">
                hostby
            </div>
            <div id="pic">
                <img id="inivitation_img" src=""/>
                
            </div>
            <div id="time_date">
                <div class="panel panel-default">
                <div class="panel-heading">Time and Date</div>
                <div class="panel-body">
                time_date
                </div>
                </div>
                
                
            </div>
            <div id="location_invi">
                <div class="panel panel-default">
                <div class="panel-heading">Venue</div>
                <div class="panel-body">
                    
              
                </div>
                </div>
            </div>
                
            
            <div id="desc_invi"> 
                <div class="panel panel-default">
                <div class="panel-heading">Description</div>
                <div class="panel-body">
                desc
                </div>
                </div>
                </div>
            </div>
        
        <div id="bottom_invi_con">
        </div>
    
    </div>
         <div id="bottom" >
            <div id="save"   >
           <input type="button" class=" btn btn-success" onclick="location.href='<?php echo site_url()?>guest_management/send_invitation'" value="Finish & Sends"/>
            
            </div>
             <br/>
             <div id="goto_seatplan" class="btn btn-default empty" style="float: right;">
                 <a class="save_btn_invi" target="_blank" href="<?php echo site_url()?>guest_management/seat_plan" data-toggle="modal" style="color: #000 !important;">Go to Seat Plan</a>
             </div><br/> 
        </div>  
        </div>
    </div>
    <div id="seatplan-con" class="hide">
        seatplan
    </div>
</div>